import { Component } from 'react';
import QuestionWrap from '../QuestionWrap/QuestionWrap'
import AnswerWrap from '../AnswerWrap/AnswerWrap'
import CommunicateWrap from '../CommunicateWrap/CommunicateWrap'
import './Wrap.css'

export default class Wrap extends Component {
  constructor(props) {
    super(props);
    const { useremail, interviewId } = this.props.routeProps.location.state
    this.state = {
      useremail: useremail,
      interviewId: interviewId,
      client: this.props.client,
    }
  }
  render () {
    return (
      <div id="wrap">
        <QuestionWrap interviewId={this.state.interviewId} client={this.state.client} />
        <div className="drag-bar"></div>
        <AnswerWrap />
        <CommunicateWrap  client={this.state.client} useremail={this.state.useremail} interviewId={this.state.interviewId}/>
      </div>
    )
  }

  // 组件渲染结束后才能拿到div的id，所以我们要拿div的函数都得写在componentDidMount()里面，
  // 这是React自个儿定义的函数
  componentDidMount () {
    console.log(this.state.useremail);
    var dragBar = document.getElementsByClassName('drag-bar')[0];
    var questionWrap = document.getElementById('question-wrap');
    var answerWrap = document.getElementById('answer-wrap');
    var communicateWrap = document.getElementById('communicate-wrap');
    var wrap = document.getElementById('wrap');
    dragBar.onmousedown = function (e) {
      var startX = e.clientX;
      dragBar.left = dragBar.offsetLeft;
      document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = dragBar.left + (endX - startX);
        var maxT = wrap.clientWidth - dragBar.offsetWidth - communicateWrap.clientWidth;
        if (moveLen < 150) {
          moveLen = 150;
        }
        else if (moveLen > maxT - 150) {
          moveLen = maxT - 150;
        }
        dragBar.style.left = moveLen;
        questionWrap.style.width = moveLen + 'px';
        answerWrap.style.width = (wrap.clientWidth - 10 - moveLen - communicateWrap.clientWidth) + 'px';
      }
      document.onmouseup = function (evt) {
        document.onmousemove = null;
        document.onmouseup = null;
        dragBar.releaseCapture && dragBar.releaseCapture();
      }
      dragBar.setCapture && dragBar.setCapture();
      return false;
    }

  }
}